<template>
  <div class="login-panel">
    <h1 class="title">后台管理系统</h1>
    <div class="tabs">
      <!-- 不能直接设置图标 就可以用到插槽 -->
      <el-tabs type="border-card" stretch="true" v-model="actionName">
        <!-- <el-tab-pane name="account"> -->
        <!-- Tab-pane 插槽​
          插槽名	说明
          default	Tab-pane 的内容
          label	Tab-pane 的标题内容 -->
        <!-- prop="account" 用于验证 -->
        <!-- <template #label>
            <div class="label">
              <el-icon><UserFilled /></el-icon>
              <span class="text">账号登录</span>
            </div>
          </template>
          <div>
            <el-form label-width="60" :model="form" size="large" :rules="rules">
              <el-form-item label="帐号" prop="account">
                <el-input v-model="form.account" />
              </el-form-item>
              <el-form-item label="密码" prop="pwd">
                <el-input show-password v-model="form.pwd" />
              </el-form-item>
            </el-form>
          </div> -->
        <!-- </el-tab-pane> -->

        <!-- <el-tab-pane label="手机登录" name="phone"> -->
        <!-- <template #label>
            <div class="label">
              <el-icon><Iphone /></el-icon>
              <span class="text">手机登录</span>
            </div>
          </template>
          <div>
            <el-form label-width="70" :model="form" size="large" :rules="rules">
              <el-form-item label="帐号" prop="phone">
                <el-input v-model="form.phone" />
              </el-form-item>
              <el-form-item label="验证码" prop="code">
                <el-input show-password v-model="form.code" />
              </el-form-item>
            </el-form>
          </div> -->
        <!-- </el-tab-pane> -->

        <PanelAccount ref="accountRef" />
        <PanelPhone />
      </el-tabs>
    </div>

    <div class="controls">
      <el-checkbox v-model="isRemPwd" label="记住密码" size="large" />
      <el-link herf="" type="primary">忘记密码</el-link>
    </div>

    <!-- <el-button class="login-but" type="primary">登录</el-button> -->
    <div class="login-but">
      <el-button class="login-but-dl" type="primary" size="large" @click="hadleLoginAction"
        >立即登录</el-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import PanelAccount from './Panel-account.vue'
import PanelPhone from './Panel-phone.vue'
import { localCache } from '@/utils/cache'

// const rules: FormRules = {
//   account: [
//     { required: true, message: '请输入用户名', trigger: 'blur' }, // blur 失去焦点触发验证
//     { min: 3, max: 5, message: '长度必须3-5', trigger: 'blur' },
//   ],
//   pwd: [
//     { required: true, message: '请输入密码', trigger: 'blur' },
//     { pattern: /^[a-z0-9]{6,20}$/, min: 6, message: '长度必须大于6', trigger: 'blur' },
//   ],

// // 手机
// phone: [
//   { required: true, message: '请输入手机号', trigger: 'blur' }, // blur 失去焦点触发验证
// ],
// code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
// }

// const form = reactive({
//   account: '',
//   pwd: '',
//   code: '',
//   phone: '',
// })

const actionName = ref('user_name') // 默认选择tab
const accountRef = ref<InstanceType<typeof PanelAccount>>()
const phoneRef = ref<InstanceType<typeof PanelPhone>>()

const isRemPwd = ref<boolean>(localCache.getCache('isRemPwd') ?? false)
// 方式二 用
watch(isRemPwd, (newVal) => {
  console.log('监听到的状态---：', newVal)
  // 这里再设置 localCache.setCache('isRemPwd',newVal) ,这样就可以不用在登陆成功后去处理了
})

function hadleLoginAction() {
  if (actionName.value === 'phone') {
    console.log('====1====')
    console.log(actionName.value)
    // console.log(form.phone)
    phoneRef.value?.LoginActionByPhone(isRemPwd.value)
  } else {
    console.log('====2====')
    console.log(actionName.value)
    accountRef.value?.LoginAction(isRemPwd.value)
  }
}
</script>

<style scoped>
.login-panel {
  width: 330px;
  /* border: 1px solid red; */
}

.title {
  text-align: center;
}

.controls {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

/* 可以不用套 直接把登录按钮设置100% 即可 */
.login-but {
  margin-top: 10px;
  width: 100%;
  .login-but-dl {
    width: 100%;
    /* 为 size="large" 设置自定义内置变量css ，去控制台找到这个变量 这覆盖 */
    --el-button-size: 45px !important;
  }
}

.label {
  display: flex;
  justify-content: center;
  align-items: center;
  .text {
    margin-left: 2px;
  }
}
</style>
